آموزش Bootcamp توسعه وب Frontend - ساخت یک کلون توییتر [ویدئو]

سرفصل ها و درس ها

خوش آمدی Welcome

• معرفی Introduction

• برپایی Setup

دوره خرابی HTML HTML Crash Course

• HTML چیست What is HTML

• سند پایه HTML Basic HTML Document

• سرفصل ها، پاراگراف ها و موارد دیگر Headings, Paragraphs and more

• لیست ها Lists

• پیوندها Links

• تصاویر Images

• فرم ها - قسمت 1 Forms - Part 1

• فرم ها - قسمت 2 Forms - Part 2

• عناصر معنایی HTML5 HTML5 Semantic Elements

دوره CSS Crash CSS Crash Course

• CSS چیست و چگونه آن را بنویسیم What is CSS and how to write it

• CSS چیست و چگونه آن را بنویسیم What is CSS and how to write it

• انتخابگرهای CSS CSS Selectors

• انتخابگرهای CSS CSS Selectors

• رنگ ها در CSS Colors in CSS

• رنگ ها در CSS Colors in CSS

• قالب بندی متن Text Formatting

• قالب بندی متن Text Formatting

• فونت ها Fonts

• فونت ها Fonts

• مدل جعبه Box Model

• مدل جعبه Box Model

• کلاس های شبه Pseudo Classes

• کلاس های شبه Pseudo Classes

• عناصر شبه Pseudo Elements

• عناصر شبه Pseudo Elements

• واحدهای اندازه گیری - قسمت 1 Measurement units - Part 1

• واحدهای اندازه گیری - قسمت 1 Measurement units - Part 1

• واحدهای اندازه گیری - قسمت 2 Measurement units - Part 2

• واحدهای اندازه گیری - قسمت 2 Measurement units - Part 2

• موقعیت ها - قسمت 1 Positions - Part 1

• موقعیت ها - قسمت 1 Positions - Part 1

• موقعیت ها - قسمت 2 Positions - Part 2

• موقعیت ها - قسمت 2 Positions - Part 2

• شناورها Floats

• شناورها Floats

• پس زمینه - قسمت 1 Backgrounds - Part 1

• پس زمینه - قسمت 1 Backgrounds - Part 1

• پس زمینه - قسمت 2 Backgrounds - Part 2

• پس زمینه - قسمت 2 Backgrounds - Part 2

• سایه ها Shadows

• سایه ها Shadows

• انتقال ها Transitions

• انتقال ها Transitions

• تبدیل - قسمت 1 Transforms - Part 1

• تبدیل - قسمت 1 Transforms - Part 1

• تبدیل - قسمت 2 Transforms - Part 2

• تبدیل - قسمت 2 Transforms - Part 2

دوره CSS Crash CSS Crash Course

CSS Flexbox CSS Flexbox

• مقدمه ای بر CSS Flexbox Introduction to CSS Flexbox

• مقدمه ای بر CSS Flexbox Introduction to CSS Flexbox

• خواص ظروف فلکس Flex Container Properties

• خواص ظروف فلکس Flex Container Properties

• ویژگی های مورد فلکس Flex Item Properties

• ویژگی های مورد فلکس Flex Item Properties

CSS Flexbox CSS Flexbox

شبکه CSS CSS Grid

• CSS Grid معرفی CSS Grid Introduction

• CSS Grid معرفی CSS Grid Introduction

• برپایی Setup

• برپایی Setup

• نحوه ایجاد گرید How to create Grid

• نحوه ایجاد گرید How to create Grid

• واحد کسری Fractional Unit

• واحد کسری Fractional Unit

• نحوه قرار دادن اقلام شبکه How to position Grid Items

• نحوه قرار دادن اقلام شبکه How to position Grid Items

• نامگذاری اقلام شبکه - قسمت 1 Naming Grid Items - Part 1

• نامگذاری اقلام شبکه - قسمت 1 Naming Grid Items - Part 1

• نامگذاری اقلام شبکه - قسمت 2 Naming Grid Items - Part 2

• نامگذاری اقلام شبکه - قسمت 2 Naming Grid Items - Part 2

• نامگذاری مناطق شبکه Naming Grid Areas

• نامگذاری مناطق شبکه Naming Grid Areas

• شبکه های صریح و ضمنی Explicit and Implicit Grids

• شبکه های صریح و ضمنی Explicit and Implicit Grids

• تراز کردن موارد شبکه Aligning Grid Items

• تراز کردن موارد شبکه Aligning Grid Items

• تراز کردن مسیر شبکه Aligning Grid Track

• تراز کردن مسیر شبکه Aligning Grid Track

• max-content، min-content، minmax() max-content, min-content, minmax()

• max-content، min-content، minmax() max-content, min-content, minmax()

• پر کردن خودکار و تنظیم خودکار auto-fill and auto-fit

• پر کردن خودکار و تنظیم خودکار auto-fill and auto-fit

شبکه CSS CSS Grid

پروژه - ساخت کلون توییتر (صفحه اصلی) Project - Build a Twitter Clone (Main Page)

• بررسی اجمالی پروژه Project Overview

• بررسی اجمالی پروژه Project Overview

• ایجاد ساختار صفحه اصلی Create Structure of Main Page

• ایجاد ساختار صفحه اصلی Create Structure of Main Page

• یک ظاهر طراحی صفحه اصلی - قسمت 1 Styling of Main Page - Part 1

• یک ظاهر طراحی صفحه اصلی - قسمت 1 Styling of Main Page - Part 1

• طراحی صفحه اصلی - قسمت 2 Styling of Main Page - Part 2

• طراحی صفحه اصلی - قسمت 2 Styling of Main Page - Part 2

• یک ظاهر طراحی عنصر فرم Styling of Form Element

• یک ظاهر طراحی عنصر فرم Styling of Form Element

• یک ظاهر طراحی بنر Styling of Banner

• یک ظاهر طراحی بنر Styling of Banner

• یک ظاهر طراحی شده برای پاورقی Styling of Footer

• یک ظاهر طراحی شده برای پاورقی Styling of Footer

پروژه - ساخت کلون توییتر (صفحه اصلی) Project - Build a Twitter Clone (Main Page)

پروژه - ساخت کلون توییتر (صفحه ورود) Project - Build a Twitter Clone (Login Page)

• ایجاد ساختار صفحه ورود Create Structure of Login Page

• ایجاد ساختار صفحه ورود Create Structure of Login Page

• طرح بندی صفحه Layout of the Page

• طرح بندی صفحه Layout of the Page

• سبک ناوبری Styling of Navigation

• سبک ناوبری Styling of Navigation

• سبک ورود - قسمت 1 Styling of Login - Part 1

• سبک ورود - قسمت 1 Styling of Login - Part 1

• سبک ورود - قسمت 2 Styling of Login - Part 2

• سبک ورود - قسمت 2 Styling of Login - Part 2

پروژه - ساخت کلون توییتر (صفحه ورود) Project - Build a Twitter Clone (Login Page)

پروژه - ساخت کلون توییتر (صفحه خبر) Project - Build a Twitter Clone (News Feed Page)

• ایجاد ساختار ناوبری Create Structure of Navigation

• ایجاد ساختار ناوبری Create Structure of Navigation

• سبک ناوبری Styling of Navigation

• سبک ناوبری Styling of Navigation

• ساختار سربرگ فید خبری را ایجاد کنید Create structure of News Feed Header

• ساختار سربرگ فید خبری را ایجاد کنید Create structure of News Feed Header

• طراحی سربرگ فید خبری - قسمت 1 Styling of News Feed Header - Part 1

• طراحی سربرگ فید خبری - قسمت 1 Styling of News Feed Header - Part 1

• سبک سازی سربرگ فید خبری - قسمت 2 Styling of News Feed Header - Part 2

• سبک سازی سربرگ فید خبری - قسمت 2 Styling of News Feed Header - Part 2

• ایجاد ساختار پست ها Create Structure of Posts

• ایجاد ساختار پست ها Create Structure of Posts

• استایل بندی پست ها Styling of Posts

• استایل بندی پست ها Styling of Posts

• ایجاد ساختار بخش - "چه کسی باید دنبال شود" Create Structure of Section - "Who to follow"

• ایجاد ساختار بخش - "چه کسی باید دنبال شود" Create Structure of Section - "Who to follow"

• حالت دادن به بخش "چه کسی دنبال شود". Styling of "Who to follow" Section

• حالت دادن به بخش "چه کسی دنبال شود". Styling of "Who to follow" Section

• دکمه ایجاد پست Create Post Button

• دکمه ایجاد پست Create Post Button

پروژه - ساخت کلون توییتر (صفحه خبر) Project - Build a Twitter Clone (News Feed Page)

دوره خرابی جاوا اسکریپت JavaScript Crash Course

• جاوا اسکریپت چیست؟ What is JavaScript?

• جاوا اسکریپت چیست؟ What is JavaScript?

• متغیرها در جاوا اسکریپت Variables in JavaScript

• متغیرها در جاوا اسکریپت Variables in JavaScript

• انواع داده جاوا اسکریپت JavaScript Data types

• انواع داده جاوا اسکریپت JavaScript Data types

• اپراتورها Operators

• اپراتورها Operators

• نوع اجبار Type Coercion

• نوع اجبار Type Coercion

• اظهارات مشروط Conditional Statements

• اظهارات مشروط Conditional Statements

• کارکرد Functions

• کارکرد Functions

• توابع پیکان Arrow Functions

• توابع پیکان Arrow Functions

• آرایه ها Arrays

• آرایه ها Arrays

• اشیاء Objects

• اشیاء Objects

• حلقه ها Loops

• حلقه ها Loops

• رشته های الگو Template Strings

• رشته های الگو Template Strings

دوره خرابی جاوا اسکریپت JavaScript Crash Course

دوره Crash DOM DOM Crash Course

• DOM چیست؟ What is DOM?

• DOM چیست؟ What is DOM?

• عناصر را انتخاب و دستکاری کنید - قسمت 1 Select and manipulate the elements - Part 1

• عناصر را انتخاب و دستکاری کنید - قسمت 1 Select and manipulate the elements - Part 1

• عناصر را انتخاب و دستکاری کنید - قسمت 2 Select and manipulate the elements - Part 2

• عناصر را انتخاب و دستکاری کنید - قسمت 2 Select and manipulate the elements - Part 2

• سبک ها و کلاس های DOM DOM styles and classes

• سبک ها و کلاس های DOM DOM styles and classes

• مناسبت ها Events

• مناسبت ها Events

• ویژگی ها را دستکاری کنید Manipulate the Attributes

• ویژگی ها را دستکاری کنید Manipulate the Attributes

• ناوبری DOM DOM Navigation

• ناوبری DOM DOM Navigation

• نحوه ایجاد عناصر در DOM How to Create Elements in DOM

• نحوه ایجاد عناصر در DOM How to Create Elements in DOM

دوره Crash DOM DOM Crash Course

پروژه - ساخت یک کلون توییتر (جاوا اسکریپت را به صفحه اصلی و ورود اضافه کنید Project - Build a Twitter Clone (Add JavaScript to Main and Login Page

• به صفحه ورود بروید Navigate to Login Page

• به صفحه ورود بروید Navigate to Login Page

• اعتبار سنجی صفحه اصلی Main Page Validation

• اعتبار سنجی صفحه اصلی Main Page Validation

• جعبه مدال را ایجاد کنید Create Modal Box

• جعبه مدال را ایجاد کنید Create Modal Box

• اعتبار سنجی صفحه ورود Login Page Validation

• اعتبار سنجی صفحه ورود Login Page Validation

پروژه - ساخت یک کلون توییتر (جاوا اسکریپت را به صفحه اصلی و ورود اضافه کنید Project - Build a Twitter Clone (Add JavaScript to Main and Login Page

پروژه - ساخت کلون توییتر (جعبه مدال پست) Project - Build a Twitter Clone (Post Modal Box)

• ایجاد ساختار Post Modal Create Structure of Post Modal

• ایجاد ساختار Post Modal Create Structure of Post Modal

• استایلینگ پست مدال - قسمت 1 Styling of Post Modal - Part 1

• استایلینگ پست مدال - قسمت 1 Styling of Post Modal - Part 1

• استایلینگ پست مدال - قسمت 2 Styling of Post Modal - Part 2

• استایلینگ پست مدال - قسمت 2 Styling of Post Modal - Part 2

• Post Modal Work Make Post Modal Work

• Post Modal Work Make Post Modal Work

پروژه - ساخت کلون توییتر (جعبه مدال پست) Project - Build a Twitter Clone (Post Modal Box)

پروژه - ساخت کلون توییتر (نوار کناری) Project - Build a Twitter Clone (Sidebar)

• ایجاد ساختار نوار کناری Create Structure of Sidebar

• ایجاد ساختار نوار کناری Create Structure of Sidebar

• یک ظاهر طراحی شده نوار کناری - قسمت 1 Styling of Sidebar - Part 1

• یک ظاهر طراحی شده نوار کناری - قسمت 1 Styling of Sidebar - Part 1

• یک ظاهر طراحی شده نوار کناری - قسمت 2 Styling of Sidebar - Part 2

• یک ظاهر طراحی شده نوار کناری - قسمت 2 Styling of Sidebar - Part 2

• نوار کناری کار کند Make Sidebar Work

• نوار کناری کار کند Make Sidebar Work

پروژه - ساخت کلون توییتر (نوار کناری) Project - Build a Twitter Clone (Sidebar)

پروژه - ساخت کلون توییتر (حالت تاریک) Project - Build a Twitter Clone (Dark Mode)

• یک دکمه جابجایی ایجاد کنید Create a Toggle Button

• یک دکمه جابجایی ایجاد کنید Create a Toggle Button

• تغییر به حالت تاریک - قسمت 1 Switching to Dark Mode - Part 1

• تغییر به حالت تاریک - قسمت 1 Switching to Dark Mode - Part 1

• تغییر به حالت تاریک - قسمت 2 Switching to Dark Mode - Part 2

• تغییر به حالت تاریک - قسمت 2 Switching to Dark Mode - Part 2

پروژه - ساخت کلون توییتر (حالت تاریک) Project - Build a Twitter Clone (Dark Mode)

پروژه - ساخت کلون توییتر (طراحی وب واکنشگرا) Project - Build a Twitter Clone (Responsive Web Design)

• صفحه اصلی را ریسپانسیو کنید Make Main Page Responsive

• صفحه اصلی را ریسپانسیو کنید Make Main Page Responsive

• صفحه ورود را پاسخگو کنید Make Login Page Responsive

• صفحه ورود را پاسخگو کنید Make Login Page Responsive

• صفحه فید خبری را پاسخگو کنید Make News Feed Page Responsive

• صفحه فید خبری را پاسخگو کنید Make News Feed Page Responsive

پروژه - ساخت کلون توییتر (طراحی وب واکنشگرا) Project - Build a Twitter Clone (Responsive Web Design)